<template>
    <div class="all-box">
        <van-nav-bar title="全部商品" 
            @click="router.push('/home')"
            left-arrow>
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
        <van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="3000"
            :touchable="false"
            :show-indicators="false"
        >
            <van-swipe-item>我想要一个手办，陪我走过四季，看朝阳起落，赏流星雨</van-swipe-item>
            <van-swipe-item>我喜欢的少年是个手办，摆在橱窗里等着被人打扮成他喜欢看到的模样。</van-swipe-item>
            <van-swipe-item>你的手办，我的青春。我们都有一个共同的名字叫做动漫迷！</van-swipe-item>
        </van-swipe>
        </van-notice-bar>
        <div class="content" @scroll="scrollEvt">
            <van-back-top right="10vw" bottom="10vh" />
            <div class="product" v-for="it in homeProductsList" :key="it.id">
                <img :src="baseURL + it.path" alt="">
                <div class="title">{{ it.title }}</div>
                <p>￥{{ it.price }}</p>
                <van-button @click="addCart(it)">
                        加入购物车
                </van-button>
            </div>
        </div>
        <div class="loading-box">
            <div v-if="loading">上滑加载更多商品</div>
            <div v-else-if="hasMore">
                <van-loading type="spinner" color="#33d900" />
            </div>
            <div v-else>已经到底啦！</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, Ref } from "vue";
import { useRouter } from "vue-router";
import { getHomeProductsApi } from "../../../apis/productApis";
import { addProductApi } from "../../../apis/cartApis";
import { useCommonStore } from "../../../store";
import { showToast } from "vant";
import { userAddressApi } from "../../../apis/addressApis";
const baseURL = window.baseURL;
const router = useRouter()
/** 推荐商品数据 */
const homeProductsList:Ref<Array<any>> = ref([])
const page:Ref<number> = ref(1)
getHomeProductsList()
async function getHomeProductsList(){
    let _res = await getHomeProductsApi(page.value,6)
    // console.log(_res)
    if(_res.code === 200){
        hasMore.value = _res.data.total > page.value * 6
        homeProductsList.value = [...homeProductsList.value,..._res.data.rows]
    }
    loading.value = false
} 

/** 页面滚动触发加载数据事件 */ 
const hasMore:Ref<boolean> = ref(true)
const loading:Ref<boolean> = ref(true)

function scrollEvt(evt:Event){
    // console.log('---------------1')
    let _tar:HTMLDivElement = evt.target as HTMLDivElement
    const toBottom:boolean =  _tar.scrollHeight - _tar.clientHeight - _tar.scrollTop <= 100;
    if(toBottom && !loading.value && hasMore.value){
        loading.value = true
    page.value += 1
    getHomeProductsList()
    }
}

// 获取我的收获地址数据
const uid:string = useCommonStore().userInfo.id
const address:Ref = ref('')
const id:Ref = ref('')
getAddressList()
async function getAddressList(){
  let _res = await userAddressApi(uid)
  if(_res.code === 200){
    address.value = _res.data[0].address
    id.value = _res.data[0].phone
  }
}

// 添加到购物车 
async function addCart(it:any){
    let _res = await addProductApi({
        userId: id.value,
        id:it.id,
        price:it.price,
        time:Date.now(),
        count:'1',
        name:it.title,
        detailaddress:address.value,
        bgUrl:it.path
    })
    if(_res.code === 200){
        showToast('添加购物车成功！')
    }
    
}

</script>
<style lang="less" scoped>
@import url('../../../style/comon.less');
.all-box{
    display: block;
    position: relative;
    height: 100%;
    background-color: #efeeee;
    &::v-deep .van-nav-bar__content{
        height: 40px;
        position: sticky;
        top: 0;
    }
    &::v-deep .van-icon{
        color: @g8;
        font-size: 1rem;
    }
    .notice-swipe {
        height: 40px;
        line-height: 40px;
        background-color: @g2;
        padding-left: 16px;
        color: @b1;
        font-size: .6rem;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
    }
    .content{
        display: flex;
        flex-wrap: wrap;
        height: calc(100% - 40px);
        overflow-x: hidden;
        padding: 10px;
        justify-content: space-around;
        background-color: @g1;
        .product{
            width: 46%;
            background-color: #fff;
            margin: 8px 0;
            position: relative;
            // border-radius: .8rem;
            // box-shadow: 0 0 4px @g3;
            img{
                width: 86%;
                margin: 0 calc((100% - 86%)/2);
            }
            .title{
                height: 46px;
                padding: 0 6px;
                font-size: .7rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                line-height: 26px;
                font-weight: bold;
            }
            p{
                line-height: 1.5rem;
                color: @b1;
                font-size: .7rem;
                margin: .6rem 0;
            }
            .van-button{
                height: 1.4rem;
                border-radius: 10px;
                background-color: @g3;
                color: rgb(100, 100, 100);
                font-size: .6rem;
                border: none;
                position: absolute;
                right: .5rem;
                bottom: 10px;
            }
        }
    }
}
</style>